<template>
  <div class="login-container">
    <video
      data-v-81300996=""
      src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4"
      autoplay="autoplay"
      loop="loop"
      muted="muted"
      style="width: 100%; height: 100%; object-fit: fill"
    />
    <div class="form">
      <div class="title-container">
        <img
          src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"
        >
      </div>
      <!--登录表单-->
      <el-form ref="loginForm" :model="loginForm" :rules="rules">
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            prefix-icon="el-icon-user-solid"
            placeholder="账号"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            prefix-icon="el-icon-unlock"
            show-password
            placeholder="密码"
          />
        </el-form-item>

        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="验证码" type="text">
            <template #prefix>
              <img
                src=""
                class="icon-img"
              >
            </template>
            <template #suffix>
              <img ref="img" src="82658bd2-23a5-4ebc-bbe5-01ae5f8b4731" alt="" class="code-image" @click="getcode">
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button ref="loginBtn" type="primary" :loading="isLoading" @click="hClick">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getCode } from '@/api/user'
import { randomNum } from '@/utils/index'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        account: 'shenlingadmin',
        password: '123456',
        code: ''
      },
      rules: {
        account: [
          { required: true, message: '手机号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码未6-16位', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      key: '',
      isLoading: false
    }
  },
  created() {
    this.getcode()
  },
  methods: {
    getcode() {
      this.key = randomNum(4, 10)
      getCode({
        key: this.key
      }).then(res => {
        const imageUrl = URL.createObjectURL(res)
        const img = this.$refs.img
        img.src = imageUrl
      })
    },
    async hClick() {
      this.isLoading = true
      try { await this.doLogin() } catch {
        this.isLoading = false
        this.getcode()
      }
    },
    async doLogin() {
      await this.$store.dispatch('user/login', { ...this.loginForm, key: this.key })
      this.isLoading = false
      this.$message.success('登录成功')
      this.$router.push('/')
    }
  }
}
</script>
<style scoped lang="scss">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .form {
    position: absolute;
    top: 45%;
    left: 45%;
    margin: -180px 0 0 -160px;
    width: 450px;
    height: 490px;
    padding: 36px 40px;
    background: #fff;
    border-radius: 10px;
    ::v-deep.el-input__inner {
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
      padding-left: 48px;
      height: 50px;
      padding-right: 30px;
    }
    .title-container {
      position: relative;
      margin-bottom: 28px;
      text-align: center;
      img {
        height: 54px;
      }
    }
    .icon-img {
      width: 21px;
      height: 21px;
      margin-top: 13px;
      margin-left: 3px;
    }
    .el-button {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background-color: #e15536;
      border: 1px solid #dcdfe6;
      color: #606266;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      -webkit-transition: 0.1s;
      transition: 0.1s;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
      border: 0;
      font-size: 18px;
      color: #fff;
      font-weight: 700;
      width: 100%;
      height: 54px;
      margin-bottom: 14px;
      margin-top: 22px;
    }
  }
  ::v-deep.el-input .el-input__inner:focus,
  .el-select .el-input__inner:focus {
    border-color: #e15536 !important;
  }
  .code-image{
    display: inline-block;
    vertical-align: top;
    width: 71px;
    height: 32px;
    cursor: pointer;
    margin-left: 10px;
    position: absolute;
    right: 10px;
    top: 9px;
  }
}
</style>
